<?php
session_start();
include_once "checkLogin.php";
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="css/menu.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/nav.js" type="text/javascript"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="js/TweenMax.min.js"></script>
    <link href="css/word.css" rel="stylesheet" type="text/css"/>
    <title>图书借阅查询</title>
    <style>

        #content #imgs {
            width: 5%;
            position: relative;
            left: 3%;
        }

        #content #dangan {
            position: relative;
            left: 4%;
            bottom: -8px;
            box-shadow: -4px -4px 10px #9db7c8;
            font-size: 22px;
            font-weight: 100;
        }

        #content thead tr {
            background-color: #E2F5F7;
        }

        #content thead th {
            color: black;
            font-weight: bold;
            border-right: 2px solid white;
            text-align: center;
        }

        table td {
            color: black;
        }
        table tr th:last-child {
             width: 50px;
         }

        tbody td a {
            font-size: 1.1em;
            color: skyblue;
            cursor: pointer;
        }

        #text {
            top: 18px;
            left: 62%;
        }

        #content {
            width: 95%;
            border: 1px solid #dddddd;
            margin: 20px auto;
        }

        #now {
            margin-left: 5%;
            margin-top: 1%;
        }

        #content table {
            width: 100%;
            margin-left: 0;
        }

        #search {
            width: 100%;
            height: 120px;
            background-color: skyblue;
        }

        #search img {
            margin-top: 20px;
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
<canvas id="Mycanvas" style="position: absolute;left: 0%;width: 100%;height: 99%"></canvas>
<div id="main">
    <header>
        <div id="header1">
            <div id="a"></div>
            <img src="img/logo1.png">
            <h2 class="letter-wrap"  data-stagger="-0.015">清华大学图书馆管理系统</h2>
            <span>当前登录用户：
                <?php echo $_SESSION['admin']?></span>
        </div>
    </header>
    <div class="navmain">
        <div id="time"><span></span></div>
        <ul id="nav_all">
            <li><a href="index.php">首页</a></li>
            <?php
            include_once "conn.php";
            $main = new main();
            $info = $main->checkAdmin($_SESSION['admin']);
            if ($info['system']){
                ?>
                <li><a href="#">系统设置</a>
                    <ul style="display: none;">
                        <li><a href="library.php">图书馆信息</a></li>
                        <li><a href="admin.php">管理员设置</a></li>
                        <li><a href="#">参数设置</a></li>
                        <li><a href="shujia.php">书架设置</a></li>
                    </ul>
                </li>
                <?php
            }
            if ($info['readerset']){
                ?>
                <li><a href="#">读者管理</a>
                    <ul style="display: none;">
                        <li><a href="readertype.php">读者类型管理</a></li>
                        <li><a href="user.php">读者档案管理</a></li>
                    </ul>
                </li>
                <?php
            }
            if ($info['bookset']){
                ?>
                <li><a href="tushudangan.php">图书档案管理</a></li>
                <?php
            }
            if ($info['book']){
                ?>
                <li><a>图书借还</a>
                    <ul style="display: none;">
                        <li><a href="bookjieyue.php">图书借阅</a></li>
                        <li><a href="bookxujie.php">图书续借</a></li>
                        <li><a href="bookback.php">图书归还</a></li>
                    </ul>
                </li>
                <?php
            }
            if ($info['syschaxun']){
                ?>
                <li> <a>系统查询</a>
                    <ul style="display: none;">
                        <li><a href="tushudanganchaxun.php">图书档案查询</a></li>
                        <li><a href="jieyuechaxun.php">图书借阅查询</a></li>
                        <li><a href="jieyue.php">借阅到期提醒</a></li>
                    </ul>
                </li>
                <?php
            }
            ?>
            <li>
                <a href="pw.php">更改口令</a>
            </li>
            <li><a href="zhuxiao.php">注销</a> </li>
        </ul>
    </div>
    <div id="b"></div>
    <img id="null" src="img/null.png" style="width: 9%;position: absolute;top: 58%;left:43%;display: none ">
    <img id="load" src="img/loding.gif" style="position: absolute;top: 45%;left:35%; display: none">
    <div id="c">
        <div id="now">当前位置：图书借还 > 图书借阅查询 >>></div>
        <div id="content">
            <img id="imgs" src="img/book.png">
            <span id="dangan">图书借阅查询</span>
            <div id="text"><i>Jie An Yue Cha Xun</i></div>
            <hr class="layui-bg-green">
            <div id="search" style="display: flex;">
                <img src="img/search.gif">
                <div style="margin-left: 3%">
                    <div style="display: flex; margin-top: 10px" class="layui-form">
                        <div class="layui-form-item">
                            <label style="float: left;margin-top: 10px"><b>请选择查询依据：</b></label>
                            <div class="layui-input-inline">
                                <select name="search" lay-verify="required">
                                    <option value="0">条形码</option>
                                    <option value="1">类别</option>
                                    <option value="2" selected>书名</option>
                                    <option value="3">作者</option>
                                    <option value="4">出版社</option>
                                    <option value="5">书架</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <input style="width: 175%;" type="text" name="title" id="value" required lay-verify="required" placeholder="请输入内容"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item" style="margin-left: 150px">
                            <div class="layui-input-inline">
                                <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;margin-top: 10px" class="layui-form" id="input">
                        <div class="layui-input-inline">
                            <input type="checkbox" id="jieyue" name="jieyuetime" title="借阅时间">
                        </div>
                        <div style="margin-left: -80px;margin-top: -5px">
                            <label class="layui-form-label">从</label>
                            <div class="layui-inline">
                                <input type="text" class="layui-input" id="test1" autocomplete="off">
                            </div>
                        </div>
                        <div style="margin-top: -5px;margin-left: -70px;">
                            <label class="layui-form-label">到</label>
                            <div class="layui-inline">
                                <input type="text" class="layui-input" id="test2" autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <table class="layui-table" lay-even lay-skin="nob" >
                <colgroup>
                    <col width="150">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>图书条形码</th>
                    <th>图书名称</th>
                    <th>读者条形码</th>
                    <th>读者名称</th>
                    <th>借阅时间</th>
                    <th>归还时间</th>
                    <th>是否归还</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div id="demo7" style="position:absolute;"></div>
        </div>
    </div>
    <footer>
        <hr id="one">
        <hr id="two">
        CopyRight © 2019 www.cdp.cn.com 清华大学图书馆
    </footer>
</div>
</body>
<script src="layui/layui.js"></script>
<script src="js/logo.js"></script>
<script src="js/bg.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'laydate','laypage'], function () {
        kaitime = "";
        huantime = "";
        var layer = layui.layer,
            form = layui.form,
            laydate = layui.laydate
            ,laypage = layui.laypage;
        $.ajax({
            type: "POST",
            url: "jie.php",
            data: {
                tiaojian:0
            },
            dataType: 'JSON',
            cache: false, //不缓存此页面
            success: function (data) {
                zs = data.length;
                laypage.render({
                    elem: 'demo7'
                    ,limit:5
                    ,count: zs
                    ,jump: function(obj){
                        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        console.log(obj.limit); //得到每页显示的条数
                        $.ajax({
                            type: "POST",
                            url: "jie.php",
                            data: {
                                one : obj.curr,
                                two : obj.limit,
                                tiaojian:1
                            },
                            dataType: 'JSON',
                            cache: false, //不缓存此页面
                            beforeSend: function () {
                                $("#load").css('display', 'block');
                            },
                            success: function (data) {
                                cg(data);
                            }, error(a, b, c) {
                                $("#load").css('display', 'none');
                                console.log(a, b, c);
                            }
                        });
                    }
                });
            }
        });
        function formatDateTime(inputTime) {
            var date = new Date(inputTime);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            return y + '-' + m + '-' + d;
        }
        function cg(data){
            console.log(a);
            $("#load").css('display', 'none');
            console.log(data);
            if (data.length === 0) {
                $("#null").css('display', 'block');
                $("#demo7").css('display', 'none');
            } else {
                $("#null").css('display', 'none');
                $("#demo7").css('display', 'block');
            }
            document.querySelector("tbody").innerHTML = '';
            for (let i = 0; i < data.length; i++) {
                let s =
                    `<tr>
                                    <td>${data[i]['bookcode']} </td>
                                    <td>
                                        <a href="xiugaibook.php?id=${data[i]['bookid']}">${data[i]['bookname']}</a>
                                    </td>
                                    <td>${data[i]['barcode']} </td>
                                    <td>${data[i]['user']}</td>
                                    <td> ${formatDateTime(data[i]['jietime']*1000)}</td>
                                    <td> ${formatDateTime(data[i]['backtime']*1000)}</td>
                                    <td>${data[i]['ifback']== 1 ? '<button class="layui-btn layui-btn-danger">未归还</button>':'<button class="layui-btn">已归还</button>'} </td>
                            </tr>`;
                var key = s.split(a);
                s = key.join(`<span style="color: red">${a}</span>`);
                document.querySelector("tbody").innerHTML += s;
            }
        }
        form.on('submit(formDemo)', function (data) {
            console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
            a = data.field.title;
            search =  data.field.search;
            flash = function(){
                $.ajax({
                    type: "POST",
                    url: "get1dangan.php",
                    data: {
                        id: data.field.search,
                        value: data.field.title,
                        tiaojian:0
                    },
                    dataType: 'JSON',
                    cache: false, //不缓存此页面
                    success: function (data) {
                        zs1 = data.length;
                        laypage.render({
                            elem: 'demo7'
                            ,limit:5
                            ,count: zs1
                            ,jump: function(obj){
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                console.log(obj.limit); //得到每页显示的条数
                                $.ajax({
                                    type: "POST",
                                    url: "get1dangan.php",
                                    data: {
                                        id: search,
                                        value: a,
                                        one : obj.curr,
                                        two : obj.limit,
                                        tiaojian:1
                                    },
                                    dataType: 'JSON',
                                    cache: false, //不缓存此页面
                                    beforeSend: function () {
                                        $("#load").css('display', 'block');
                                    },
                                    success: function (data) {
                                        cg(data);
                                        $("#test1").val("");
                                        $("#test2").val("");
                                        $(".layui-form-checkbox").removeClass("layui-form-checked");
                                    }, error(a, b, c) {
                                        $("#load").css('display', 'none');
                                        console.log(a, b, c);
                                    }
                                });
                            }
                        });
                    }, error(a, b, c) {
                        $("#load").css('display', 'none');
                        console.log(a, b, c);
                    }
                });
            };
            flash();
            flash1 = function(){
                $.ajax({
                    type: "POST",
                    url: "get1dangan.php",
                    data: {
                        id: data.field.search,
                        value: data.field.title,
                        tiaojian:0
                    },
                    dataType: 'JSON',
                    cache: false, //不缓存此页面
                    success: function (data) {
                        zs1 = data.length;
                        laypage.render({
                            elem: 'demo7'
                            ,limit:5
                            ,count: zs1
                            ,jump: function(obj){
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                console.log(obj.limit); //得到每页显示的条数
                                $.ajax({
                                    type: "POST",
                                    url: "get1dangan.php",
                                    data: {
                                        id: search,
                                        value: a,
                                        one : obj.curr,
                                        two : obj.limit,
                                        tiaojian:1
                                    },
                                    dataType: 'JSON',
                                    cache: false, //不缓存此页面
                                    beforeSend: function () {
                                        $("#load").css('display', 'block');
                                    },
                                    success: function (data) {
                                        cg(data);
                                        $(".layui-form-checkbox").removeClass("layui-form-checked");
                                    }, error(a, b, c) {
                                        $("#load").css('display', 'none');
                                        console.log(a, b, c);
                                    }
                                });
                            }
                        });
                    }, error(a, b, c) {
                        $("#load").css('display', 'none');
                        console.log(a, b, c);
                    }
                });
            };
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        $(".layui-form-checkbox").click(function () {
            if ($("#value").val()){//有值
                if ($("input[type='checkbox']").is(':checked')) {
                    if (kaitime && huantime){
                        $.ajax({
                            type: "POST",
                            url: "get11dangan.php",
                            data: {
                                id: search,
                                value: a,
                                jietime: kaitime,
                                backtime: huantime
                            },
                            dataType: 'JSON',
                            cache: false, //不缓存此页面
                            beforeSend: function () {
                                $("#load").css('display', 'block');
                            },
                            success: function (data) {
                                cg(data)
                            }, error(a, b, c) {
                                $("#load").css('display', 'none');
                                console.log(a, b, c);
                            }
                        });
                    } else{
                        laydate.render({
                            elem: '#test1' //指定元素
                            , done: function (value) {
                                kaitime = value;
                                console.log(value); //得到日期生成的值，如：2017-08-18
                                laydate.render({
                                    elem: '#test2' //指定元素
                                    , show: true //直接显示
                                    , done: function (value) {
                                        huantime = value;
                                        console.log(value); //得到日期生成的值，如：2017-08-18
                                        $.ajax({
                                            type: "POST",
                                            url: "get11dangan.php",
                                            data: {
                                                id: search,
                                                value: a,
                                                jietime: kaitime,
                                                backtime: huantime
                                            },
                                            dataType: 'JSON',
                                            cache: false, //不缓存此页面
                                            beforeSend: function () {
                                                $("#load").css('display', 'block');
                                            },
                                            success: function (data) {
                                                cg(data)
                                            }, error(a, b, c) {
                                                $("#load").css('display', 'none');
                                                console.log(a, b, c);
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
                }
                else {
                    flash1();
                }
            }
            else{//初始化时
                if ($("input[type='checkbox']").is(':checked')) {
                    if (kaitime && huantime){
                        $.ajax({
                            type: "POST",
                            url: "jie.php",
                            data: {
                                tiaojian:0
                            },
                            dataType: 'JSON',
                            cache: false, //不缓存此页面
                            success: function (data) {
                                zs = data.length;//得到总数
                                laypage.render({
                                    elem: 'demo7'
                                    ,limit:5
                                    ,count: zs
                                    ,jump: function(obj){
                                        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                        console.log(obj.limit); //得到每页显示的条数
                                        $.ajax({
                                            type: "POST",
                                            url: "jie.php",
                                            data: {
                                                one : obj.curr,
                                                two : obj.limit,
                                                tiaojian:2,
                                                jietime:kaitime,
                                                backtime:huantime
                                            },
                                            dataType: 'JSON',
                                            cache: false, //不缓存此页面
                                            beforeSend: function () {
                                                $("#load").css('display', 'block');
                                            },
                                            success: function (data) {
                                                cg(data)
                                            }, error(a, b, c) {
                                                $("#load").css('display', 'none');
                                                console.log(a, b, c);
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    } else{
                        laydate.render({
                            elem: '#test1' //指定元素
                            , done: function (value) {
                                kaitime = value;
                                console.log(value); //得到日期生成的值，如：2017-08-18
                                var data = new Date(kaitime);
                                time1 = Date.parse(data)/1000;
                                laydate.render({
                                    elem: '#test2' //指定元素
                                    ,isInitValue:new Date((time1+2678400)*1000)
                                    ,value:new Date((time1+2678400)*1000)
                                    , show: true //直接显示
                                    , done: function (value) {
                                        huantime = value;
                                        console.log(value); //得到日期生成的值，如：2017-08-18
                                        $.ajax({
                                            type: "POST",
                                            url: "jie.php",
                                            data: {
                                                tiaojian:3,
                                                jietime:kaitime,
                                                backtime:huantime,
                                            },
                                            dataType: 'JSON',
                                            cache: false, //不缓存此页面
                                            success: function (data) {
                                                zs2 = data.length;//得到总数
                                                laypage.render({
                                                    elem: 'demo7'
                                                    ,limit:5
                                                    ,count: zs2
                                                    ,jump: function(obj){
                                                        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                                        console.log(obj.limit); //得到每页显示的条数
                                                        $.ajax({
                                                            type: "POST",
                                                            url: "jie.php",
                                                            data: {
                                                                one : obj.curr,
                                                                two : obj.limit,
                                                                tiaojian:2,
                                                                jietime:kaitime,
                                                                backtime:huantime
                                                            },
                                                            dataType: 'JSON',
                                                            cache: false, //不缓存此页面
                                                            beforeSend: function () {
                                                                $("#load").css('display', 'block');
                                                            },
                                                            success: function (data) {
                                                                cg(data)
                                                            }, error(a, b, c) {
                                                                $("#load").css('display', 'none');
                                                                console.log(a, b, c);
                                                            }
                                                        });
                                                    }
                                                });
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
                }
                else{
                    $.ajax({
                        type: "POST",
                        url: "jie.php",
                        data: {
                            tiaojian:0
                        },
                        dataType: 'JSON',
                        cache: false, //不缓存此页面
                        success: function (data) {
                            zs = data.length;
                            laypage.render({
                                elem: 'demo7'
                                ,limit:5
                                ,count: zs
                                ,jump: function(obj){
                                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                    console.log(obj.limit); //得到每页显示的条数
                                    $.ajax({
                                        type: "POST",
                                        url: "jie.php",
                                        data: {
                                            one : obj.curr,
                                            two : obj.limit,
                                            tiaojian:1
                                        },
                                        dataType: 'JSON',
                                        cache: false, //不缓存此页面
                                        beforeSend: function () {
                                            $("#load").css('display', 'block');
                                        },
                                        success: function (data) {
                                            cg(data)
                                        }, error(a, b, c) {
                                            $("#load").css('display', 'none');
                                            console.log(a, b, c);
                                        }
                                    });
                                }
                            });
                        }
                    });
                }
            }
        });
    });
</script>
</html>


